@use 'src/components/style/foundation/typography' as typography;
@use 'src/components/style/foundation/colors' as colors;
@use 'src/components/style/foundation/spacing' as spacing;

.Button {
  font-size: typography.font-size(body);
  font-family: inherit;
  padding: spacing.spacing(tight) spacing.spacing(base);
  display: block;
  border-radius: 3px;
  margin-top: spacing.spacing(loose);
  margin-bottom: spacing.spacing(extra-loose);
  transition: all 150ms ease-out;
  cursor: pointer;
  border: 1px solid colors.color(grey, light);
  background-color: white;
  color: black;

  :global(.theme--dark) & {
    background-color: colors.color(grey, dark);
    border-color: colors.color(grey, dark);
    color: white;
  }

  &:disabled {
    background-color: colors.color(grey, lighter);
    color: colors.color(grey);
    cursor: not-allowed;

    :global(.theme--dark) & {
      color: colors.color(grey, light);
      background-color: colors.color(grey, dark);
    }
  }

  &:not([disabled]):hover {
    background-color: colors.color(grey, lighter);

    :global(.theme--dark) & {
      background-color: colors.color(grey);
    }
  }

  &:not([disabled]):active {
    background-color: colors.color(grey, light);

    :global(.theme--dark) & {
      background-color: colors.color(grey, light);
      color:  colors.color(grey);
    }
  }
}

:global(.g-recaptcha) {
  margin-top: spacing.spacing();
}

.error {
  border-color: red;
  color: red;
}

.errorText {
  color: #ff0000;
}

:global(.react-datepicker-wrapper) {
  display: block;
}

:global(.react-datepicker__input-container) {
  display: block;
}

.InputHint {
  font-size: typography.font-size(body, smaller);
  color: colors.color(gray, base);
}

.Select {
  :global(.theme--dark) & :not(label) {
    color: black;
  }
}
